<template>
	<view class="page-datail">
		<cl-topbar
			:title="null"
			background-color="transparent"
			:border="false"
			color="#ffffff"
		></cl-topbar>

		<!-- 轮播图 -->
		<view class="cover">
			<cl-swiper
				v-model="swiperActive"
				:list="swiper"
				radius="0rpx"
				height="564rpx"
				indicator-dots
			></cl-swiper>
		</view>

		<!-- 用户信息 -->
		<view class="info">
			<!-- 头像，昵称 -->
			<view class="top">
				<view class="avatar" @tap="showImage(userInfo.user_icon)">
					<image :src="userInfo.user_icon" mode="aspectFill" />
				</view>
				<text class="name">{{userInfo.username}}</text>
			</view>

			<!-- ID，性别，年龄，位置 -->
			<view class="group">
				<!-- ID -->
				<view class="item id">
					<text>ID:{{userInfo.id_num}}</text>
					<cl-button type="text" @tap="copy(userInfo.id_num)">复制</cl-button>
				</view>
				<!-- 性别年龄 -->
				<view class="item sex">
					
					<template v-if="userInfo.sex==0">
						<view class="icon">
							<image src="@/static/icon/brief-icon-1.png" mode="aspectFill" />
						</view>
					</template>
					
					<template v-else>
						<view class="woman-icon">
							<image src="@/static/icon/brief-icon-2.png" mode="aspectFill" />
						</view>
					</template>
					
					<text class="age">{{userInfo.age}}</text>
				</view>
				<!-- 位置 -->
				<view class="item position">
					<cl-icon name="map-fill" color="#4D8B9D"></cl-icon> <text>{{userInfo.city}}</text>
				</view>
			</view>

			<!-- 签名 -->
			<view class="signature">{{userInfo.signature}}</view>

			<!-- 统计 -->
			<view class="count">
				<view class="item">
					<text class="number">{{userInfo.article_num}}</text>
					<text class="name">动态</text>
				</view>
				
				<view class="item">
					<text class="number">{{userInfo.fans_num}}</text>
					<text class="name">粉丝</text>
				</view>
				
				<view class="item">
					<text class="number">{{userInfo.idols_num}}</text>
					<text class="name">关注</text>
				</view>
			</view>
		</view>

		<!-- 动态 -->
		<view class="dynamic">
			<text class="title">TA的动态</text>
			<!-- 列表 -->
			<view class="list">
				<view class="item" v-for="(item, index) in articleList" :key="index">
					<view style="display: flex;justify-content:space-between">
						<!-- 发布时间 -->
						<view class="time">
							<text class="month">{{ item.month }}-</text>
							<text class="day">{{ item.day }}</text>
						</view>
						
						<!-- 三个小点 -->
						<view class="more" v-if="isMyself" @tap="deleteArticleModal(item.id)">
							<image src="@/static/icon/delete.png" mode="widthFix" style="width: 30rpx;height: 30rpx;"/>
						</view>
					</view>

					<!-- 动态标题 -->
					<text class="item-title" @tap="navigateToDetail(item.id)">{{ item.text }}</text>
					<!-- 相片列表 -->
					<view class="photo">
						<!-- 只有一张相片时 -->
						<view class="only" v-if="item.image.length < 2">
							<view class="item" v-for="(photo, pIndex) in item.image" :key="pIndex" @tap="previewImage(item.image, pIndex)">
								<image lazy-load="true" :src="photo" mode="aspectFill" />
							</view>
						</view>
						<!-- 超过一张相片时 -->
						<view class="plural" v-if="item.image.length > 1">
							<cl-row :gutter="21">
								<cl-col
									:span="8"
									v-for="(photo, pIndex) in item.image"
									:key="pIndex"
									@tap="previewImage(item.image, pIndex)"
								>
									<image lazy-load="true" :src="photo" mode="aspectFill" />
								</cl-col>
							</cl-row>
						</view>
					</view>

					<!-- 底部功能按钮 -->
					<view class="bottom">

						<!-- 点赞 -->
						<view class="bottom-item like">
							<template v-if="item.is_praise == 1">
								<image src="@/static/images/article/like.png"  @tap="canclePraise(index)"/>
							</template>
							<template v-else>
								<image src="@/static/images/article/no_like.png"  @tap="praise(index)"/>
							</template>
							<view class="text">
								{{item.praise_num}}
							</view>
						</view>

						<!-- 评论 -->
						<view class="bottom-item comment" @tap="navigateToDetail(item.id)">
							<image src="@/static/images/article/dazhaohu.png" mode="aspectFill" />
							<view class="text">
								{{item.comment_num}}
							</view>
						</view>
					</view>
				</view>
				<load-more :loadText="loadText"></load-more>
			</view>
		</view>

		<!-- 关注，私聊按钮 -->
		<view class="btn" v-if="!isMyself">
			<template v-if="userInfo.follow==0">
				<view class="like">
					<cl-button round @tap="follow()">关注</cl-button>
				</view>
			</template>
			<template v-else>
				<view class="has-like">
					<cl-button round @tap="cancleFollow()">取消关注</cl-button>
				</view>
			</template>
			
			<view class="chat">
				<cl-button round @tap="navigateToChatDetail(userInfo.id, userInfo.username)">私聊TA</cl-button>
			</view>
		</view>
		
	</view>
</template>

<script>
import loadMore from "../../components/load-more.vue";
export default {
	components:{
		loadMore,
	},
	data() {
		return {
			isMyself: false,
			userInfo:{},
			articleList:[],
			loadText: "加载中...",
			isLoading: false,
			hasMore: true,
			page: 1,
			uid:"",
			swiperActive: 0,
			swiper: [
				{ url: require("@/static/images/detail-cover.png") }
			],
		};
	},
	onLoad(option) {
		console.log("option:"+option);
		this.uid = option.uid;
		if(this.uid == this.User.userinfo.id){
			this.isMyself = true;
		}
		this.getUserInfo(this.uid);
		this.getArticleList(this.uid);
	},
	onReachBottom(){
		this.getArticleList(this.uid);
	},
	onPullDownRefresh(){
		this.page = 1;
		this.hasMore = true;
		this.loadText = "加载中...";
		this.articleList = [];
		this.isLoading = false;
		this.getArticleList(this.uid);
	},
	methods:{
		showImage(img){
			uni.previewImage({
				urls:[img]
			})
		},
		copy(idNum){
			uni.setClipboardData({
			    data: idNum,
			    success: function () {
			        uni.showToast({
			        	title:"复制成功"
			        })
			    }
			});
		},
		navigateToChatDetail(userID, nickName){
			let jsonUserID = encodeURIComponent(JSON.stringify(userID));
			let jsonNickName = encodeURIComponent(JSON.stringify(nickName));
			let jsonConversationID = encodeURIComponent(JSON.stringify("C2C" + userID));
			let jsonConversationType = encodeURIComponent(JSON.stringify("C2C"));
			uni.navigateTo({
				url:"/pages/chat/detail?userID=" + jsonUserID + "&nickName=" + jsonNickName + "&conversationID=" + jsonConversationID + "&conversationType=" + jsonConversationType
			})
		},
		deleteArticleModal(id){
			let that = this;
			uni.showModal({
				content: "确认删除这条动态?",
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						that.deleteArticle(id);
					}
				}
			})
		},
		async deleteArticle(id){
			let [err,res] = await this.$http.post('Article/del',{
				article_id: id
			});
			
			if(!this.$http.errorCheck(err,res)){
				return;
			}
			
			uni.showToast({ title: '删除成功' });
			uni.startPullDownRefresh({})
		},
		async follow(){
			let [err,res] = await this.$http.post('User/follow',{
				uid: this.uid
			});
			
			if(!this.$http.errorCheck(err,res)){
				return;
			}
			
			console.log("abc");
			
			this.userInfo.follow = 1;
		},
		async cancleFollow(){
			let [err,res] = await this.$http.post('User/unFollow',{
				uid: this.uid
			});
			
			if(!this.$http.errorCheck(err,res)){
				return;
			}
			
			this.userInfo.follow = 0;
		},
		async praise(index){
			let articleId = this.articleList[index].id;
			
			let [err,res] = await this.$http.post('Praise/add',{
				article_id: articleId
			});
			
			if(!this.$http.errorCheck(err,res)){
				return;
			}
			
			this.articleList[index].is_praise = 1;
			this.articleList[index].praise_num++;
		},
		async canclePraise(index){
			let articleId = this.articleList[index].id;
			
			let [err,res] = await this.$http.post('Praise/cancle',{
				article_id: articleId
			});
			
			if(!this.$http.errorCheck(err,res)){
				return;
			}
			
			this.articleList[index].is_praise = 0;
			this.articleList[index].praise_num--;
		},
		async getUserInfo(uid){
			let [err,res] = await this.$http.get('user/user/detial/'+uid);//,{uid: uid}
			
			// if(!this.$http.errorCheck(err,res)){
			// 	return;
			// }
			// console.log(res.data.data);
			// console.log();
			// let userinfo = uni.getStorageSync("userinfo")
			// userinfo.idols_num = res.data.data.idols_num;
			// userinfo.fans_num = res.data.data.fans_num;
			// userinfo.article_num = res.data.data.article_num;
			// userinfo.signature = res.data.data.signature;
			// userinfo.username = res.data.data.username;
			// userinfo.user_icon = res.data.data.user_icon;
			// uni.removeStorage("userinfo")
			// uni.setStorageSync("userinfo")
			this.userInfo = res.data.data;
		},
		navigateToDetail(articleId){
			uni.navigateTo({
				url:"/pages/article/detail?articleId=" + articleId
			})
		},
		previewImage(image, index){
			uni.previewImage({
				urls: image,
				indicator:"number",
				current: index,
			})
		},
		async getArticleList(uid){
			if(!this.hasMore || this.isLoading){
				return;
			}
			this.isLoading = true;
			let [err,res] = await this.$http.get('dynamic/article/lists',{
				page: this.page,
				user_id: uid,
			});
			
			if(!this.$http.errorCheck(err,res)){
				return;
			}
			
			if(res.data.data.length == 0 || res.data.data.length < 10){
				this.hasMore = false;
				this.loadText = "没有更多了...";
			}
			
			uni.stopPullDownRefresh();
			this.page++;
			this.isLoading = false;
			
			this.articleList = this.articleList.concat(res.data.data);
		}
	}
};
</script>

<style lang="scss" scoped>
.page-datail {
	.cover {
		margin-top: -44px;
		image {
			width: 100%;
			height: 564rpx;
		}
	}
	.info {
		position: relative;
		width: calc(100% - 60rpx);
		margin: -65rpx 30rpx 42rpx 30rpx;
		padding-bottom: 30rpx;
		border-bottom: solid 1rpx #ebebeb;
		z-index: 9;
		.top {
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 27rpx;
			.avatar {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 132rpx;
				height: 132rpx;
				margin-bottom: 16rpx;
				background-color: #ffffff;
				border-radius: 50%;
				overflow: hidden;
				image {
					width: 120rpx;
					height: 120rpx;
				}
			}
			.name {
				font-size: 36rpx;
				font-weight: 500;
				color: #000000;
			}
		}
		.group {
			display: flex;
			align-items: center;
			margin-bottom: 39rpx;
			.item {
				display: flex;
				align-items: center;
				height: 42rpx;
				margin-right: 24rpx;
				padding: 0 18rpx;
				background-color: #f5f5f5;
				border-radius: 24rpx;
				text {
					font-size: 24rpx;
					font-weight: 400;
					color: #727272;
				}
			}
			.id {
				/deep/.cl-button {
					width: 48rpx;
					&__text {
						font-size: 24rpx;
						font-weight: 400;
						color: #4d8b9d;
					}
				}
			}
			.sex {
				.icon {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
					background-color: #58bcff;
					border-radius: 50%;
					image {
						width: 21rpx;
						height: 20rpx;
					}
				}
				.woman-icon {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
					background-color: #ff5a70;
					border-radius: 50%;
					image {
						width: 21rpx;
						height: 20rpx;
					}
				}
			}
			.position {
				.cl-icon {
					margin-right: 12rpx;
				}
			}
		}
		.signature {
			margin-bottom: 30rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #b1b1b1;
		}
		.count {
			display: flex;
			align-items: center;
			.item {
				display: flex;
				align-items: flex-end;
				margin-right: 40rpx;
				.number {
					margin-right: 6rpx;
					font-size: 36rpx;
					font-weight: 400;
					color: #282828;
				}
				.name {
					position: relative;
					bottom: 6rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #b1b1b1;
				}
			}
		}
	}
	.dynamic {
		padding: 0 30rpx 120rpx 30rpx;
		box-sizing: border-box;
		.title {
			display: block;
			margin-bottom: 40rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #303030;
		}
		.list {
			.item {
				margin-bottom: 42rpx;
				.item-title{
					font-size: 30rpx;
					font-weight: 400;
					color: #282828;
					word-break: break-all;
				}
				.time {
					margin-bottom: 20rpx;
					.month {
						font-size: 24rpx;
						font-weight: 400;
						color: #b1b1b1;
					}
					.day {
						font-size: 40rpx;
						font-weight: 400;
						color: #282828;
					}
				}
				&-title {
					display: block;
					margin-bottom: 26rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #282828;
				}
				.photo {
					.only {
						image {
							width: 390rpx;
							height: 390rpx;
						}
					}
					.plural {
						image {
							width: 216rpx;
							height: 216rpx;
						}
					}
				}
				.bottom {
					display: flex;
					align-items: center;
					justify-content:flex-end;
					width: 100%;

					&-item {
						display: flex;
						align-items: center;
						margin-right: 60rpx;
						image {
							width: 42rpx;
							height: 42rpx;
							margin-right: 12rpx;
						}
						.text{
							color: #b1b1b1;
							font-size: 21rpx;
						}
					}
					.hi {
						flex: 1;
					}
				}
			}
		}
	}
	.btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 140rpx;
		background-color: #ffffff;
		z-index: 99;
		padding: 0 30rpx;
		box-sizing: border-box;
		/deep/.cl-button {
			width: 318rpx;
			height: 88rpx;
		}
		.like {
			/deep/.cl-button {
				background-color: #5390a1;
				&__text {
					font-size: 36rpx;
					font-weight: 400;
					color: #ffffff;
				}
			}
		}
		.has-like {
			/deep/.cl-button {
				background-color: #A1A1A1;
				&__text {
					font-size: 36rpx;
					font-weight: 400;
					color: #ffffff;
				}
			}
		}
		.chat {
			/deep/.cl-button {
				::after {
					border: 4rpx solid #5390a1;
				}
				&__text {
					font-size: 36rpx;
					font-weight: 400;
					color: #5390a1;
				}
			}
		}
	}
}

</style>
